<template>
  <sn-row-has-two-col
      class="margin-bottom"
      :left="20"
      :right="4">
    <div slot="one-col">
      <el-link
          type="danger"
          @click="toCinemaInfo"
          :underline="false" class="cinema-name">
        {{ cinema.cinemaName }}
      </el-link>
      <div class="cinema-address">
        <span>
          地址 :
        </span>
        <span>
          {{ cinema.cinemaAddress }}
        </span>
      </div>
      <div>
        <el-tag
            class="service-card"
            type="primary"
            v-for="item in cinemaService">
          {{ item }}
        </el-tag>
      </div>
    </div>
    <div slot="two-col">
      <sn-row-has-two-col :left="12" :right="12">
        <div class="lowest-price" slot="one-col">
          <span>
            ￥{{ cinema.minTicketPrice }}
          </span>
          <span>
            起
          </span>
        </div>
        <el-button
            @click="toCinemaInfo"
            round
            class="choose-seat-button"
            slot="two-col" type="warning">
          选座购票
        </el-button>
      </sn-row-has-two-col>
    </div>
  </sn-row-has-two-col>
</template>

<script>
export default {
  name: "CinemaListTemplate",
  data() {
    return {
      cinemaService: ['改签', '折扣卡'],
    }
  },
  props: {
    cinema: {
      type: Object,
      default() {
        return {
          cinemaId: 0,
          cinemaName: '太平洋影城（北欧知识城店）',
          cinemaAddress: '按实际客户端卡视角汇顶科技爱上打开集合',
          minTicketPrice: 30
        }
      }
    },
  },
  methods: {
    toCinemaInfo() {
      this.$router.push({
        name: 'cinemaInfo',
        params: {
          cinemaId: this.cinema.cinemaId
        }
      })
    }
  },
}
</script>

<style scoped>
.cinema-name {
  margin-top: 10px;
}

.cinema-address {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #999999;
}

.service-card {
  margin-right: 10px;
}

.lowest-price {
  position: relative;
  top: 19px;
}

.choose-seat-button {
  position: relative;
  top: 7px;
}
</style>